﻿@{
    ViewBag.Title = "Index";
    Layout = "~/Views/Shared/Layout.Mobile.cshtml";
}
<script src="@TrialManagementTool.Helper.UrlHelper.alterContent("Scripts/mobilejs/sm-extend.min.js")"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
@*<script src="~/Scripts/mobilejs/lrz.bundle.js"></script>*@
<script src="~/Scripts/mobilejs/lrz.all.bundle.js"></script>
<script>
    Zepto(function ($) {
        $.ajax({
            url: fixUrl("api/Common/GetWeixinJs"),
            data: { url: location.href.split('#')[0] },
            success: function (data) {
                wx.config({
                    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                    appId: data.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
                    timestamp: data.timestamp, // 必填，生成签名的时间戳
                    nonceStr: data.noncestr, // 必填，生成签名的随机串
                    signature: data.signature,// 必填，签名，见附录1
                    jsApiList: ['uploadImage', 'getNetworkType', 'chooseImage', 'previewImage', 'downloadImage', 'openLocation', 'getLocation'
                        , 'hideOptionMenu', 'closeWindow'
                    ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
                });
            }
        })
    })

</script>
<div class="page page-current" id="final">

    <header class="bar bar-nav">
        <h1 class='title'>表单</h1>
    </header>
    <div class="content">
        <div class="list-block">
            <ul>
                <!-- Text inputs -->
                <li>
                    <div class="item-content">
                        <div class="item-media"><i class="icon icon-form-name"></i></div>
                        <div class="item-inner">
                            <div class="item-title label">姓名</div>
                            <div class="item-input">
                                <input type="text" placeholder="Your name" id="pick" onchange="UpdateValue()">
                                <input type="file" onchange="uploadtest(this)" />
                                <input type="hidden" id="hid_val" />
                            </div>
                        </div>
                    </div>

                    <div style="margin-left:0.75rem">
                        <div>aaaaaaaaaaaa</div>
                        <div class="item-input" data-toggle="toggle">
                            <p>aaaaa</p>
                            <p>aaaaa</p>
                            <p>aaaaa</p>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-media"><i class="icon icon-form-email"></i></div>
                        <div class="item-inner">
                            <div class="item-title label">邮箱<span class="icon icon-edit"></span></div>
                            <div class="item-input">
                                <input type="email" placeholder="E-mail">
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-media"><i class="icon icon-form-password"></i></div>
                        <div class="item-inner">
                            <div class="item-title label">密码</div>
                            <div class="item-input">
                                <input type="password" placeholder="Password" class="">
                            </div>
                        </div>
                    </div>
                </li>
                <li>
                    <div class="item-content">
                        <div class="item-media"><i class="icon icon-form-gender"></i></div>
                        <div class="item-inner">
                            <div class="item-title label">性别</div>
                            <div class="item-input">
                                <select>
                                    <option>Male</option>
                                    <option>Female</option>
                                    <option>Male</option>
                                    <option>Female</option>
                                    <option>Male</option>
                                    <option>Female</option>
                                </select>
                            </div>
                        </div>
                    </div>
                </li>
                <!-- Date -->
                <li>
                    <div class="item-content">
                        <div class="item-media"><i class="icon icon-form-calendar"></i></div>
                        <div class="item-inner">
                            <div class="item-title label">生日</div>
                            <div class="item-input">
                                <input id="cal">
                            </div>
                        </div>
                    </div>
                </li>
                <!-- Switch (Checkbox) -->
                <li>
                    <div class="item-content">
                        <div class="item-media"><i class="icon icon-form-toggle"></i></div>
                        <div class="item-inner">
                            <div class="item-title label">开关</div>
                            <div class="item-input">
                                <label class="label-switch">
                                    <input type="checkbox">
                                    <div class="checkbox"></div>
                                </label>
                            </div>
                        </div>
                    </div>
                </li>
                <li class="align-top">
                    <div class="item-content">
                        <div class="item-media"><i class="icon icon-form-comment"></i></div>
                        <div>
                            <div class="item-title label">文本域</div>
                            <img id="spaninput" src="@TrialManagementTool.Helper.UrlHelper.alterContent("Images/addNewImage.png")" class="img_preview" onclick="WxChooseImage()" />

                        </div>
                    </div>
                </li>
            </ul>
            <img id="ss" />
        </div>
        <div class="content-block">
            <div class="row">
                <div class="col-50"><a href="#" class="button button-big button-fill button-danger" onclick="save()">取消</a></div>
                <div class="col-50"><a href="#" class="button button-big button-fill button-success" onclick="Choose()">提交</a></div>
            </div>
        </div>
    </div>
</div>
<script>
    var selectcity = ""
    var provinceName = [];
    var provinceid = [];
    $.ajax({
        url: fixUrl("api/Common/GetAllProvince"),
        success: function (data) {
            $.each(data, function (index, value) {
                provinceName.push(value.Name);
                provinceid.push(value.ID);
            })
        }
    })
    $("#pick").picker({

        cols: [
          {
              textAlign: 'center',
              displayValues: provinceName,
              values: provinceid
              //如果你希望显示文案和实际值不同，可以在这里加一个displayValues: [.....]
          }

        ],
        formatValue: function (picker, value, displayValue) {
            selectcity = displayValue[0];
            //$(picker.input).val(displayValue[0]);
            $("#hid_val").val(value[0]);
        }
    });
    var postdata = { inputData: [], comment: {}, reportid: {}, imagesource: [] }

    function UpdateValue() {
        if ($("#pick").val() == "undefined") {
            $("#pick").val(selectcity);
        }
    }

    function uploadtest(target) {

        lrz(target.files[0], { width: 640 })
                   .then(function (rst) {

                       // 这里该上传给后端啦

                       /* ==================================================== */
                       // 原生ajax上传代码，所以看起来特别多，但绝对能用
                       // 其他框架，例如jQuery处理formData略有不同，请自行google，baidu。
                       var xhr = new XMLHttpRequest();
                       xhr.open('POST', '/trial/UpdateImageTest');

                       xhr.onload = function () {
                           if (xhr.status === 200) {
                               // 上传成功
                           } else {
                               // 处理其他情况
                           }
                       };

                       xhr.onerror = function () {
                           // 处理错误
                       };

                       xhr.upload.onprogress = function (e) {
                           // 上传进度
                           var percentComplete = ((e.loaded / e.total) || 0) * 100;
                       };

                       // 添加参数
                       rst.formData.append('fileLen', rst.fileLen);
                       rst.formData.append('xxx', '我是其他参数');

                       // 触发上传
                       xhr.send(rst.formData);
                       /* ==================================================== */

                       return rst;

                   })
                   .catch(function (err) {

                   })
                   .always(function () {

                   });

    }

    function save() {
        var xhr = new XMLHttpRequest();
        xhr.open('POST', "../api/trial/UpdateImageTest");

        xhr.onload = function () {
            if (xhr.status === 200) {
                // 上传成功
            } else {
                // 处理其他情况
            }
        };

        xhr.onerror = function () {
            // 处理错误
        };

        // issues #45 提到似乎有兼容性问题,关于progress
        xhr.upload.onprogress = function (e) {
            // 上传进度
            var percentComplete = ((e.loaded / e.total) || 0) * 100;
        };

        xhr.send();
    }
    function upload(target) {
        lrz(target.files[0])
            .then(function (rst) {
                var nowtime = new Date().getTime();
                $("#spaninput").before('<img class=\"img_preview\" name="uploadimage" id="img_' + nowtime + '" data-action="zoom" src="' + rst.base64 + '"/>' +
'<img src=\"../Images/del.png\" id=img_icon_' + nowtime + ' style=\"height:15px;margin-top:-30px;margin-left:-20px;cursor:pointer;\" onclick=\"DeletePreview(\'' + nowtime + '\')\" />' +
'<input type="hidden" name="imagesource" id="hid_ipt_img_' + nowtime + '"  value=' + rst.base64 + '>');
                postdata.imagesource.push({ stringsource: rst.base64 });
                // 处理成功会执行


            })
            .catch(function (err) {
                // 处理失败会执行
            })
            .always(function () {
                // 不管是成功失败，都会执行
            });
    };
    function CreateDateTime(value) {
        if (value != "") {
            $("#cal").calendar({
                value: [FormatDate(value)]
            })
        } else {
            value = new Date();
            $("#cal").calendar({
                value: [FormatDate(value)]
            });
            $("#cal").val('');
        }
    }

    function FormatDate(strTime) {
        var date = new Date(strTime);
        return date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
    }

    function Choose() {
        wx.chooseImage({
            count: 9, // 默认9
            sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
            sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
            success: function (res) {
                $.each(res.localIds, function (index, value) {
                    $("#ss").append("<img src='" + value + "'></img>")
                })
            }
        });
    }
</script>
